@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 text-dark;
  }
}

@layer components {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .transition-custom {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .input-focus {
    @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
  }
  
  .btn-hover {
    @apply hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300;
  }
  
  .glass-effect {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
  }
  
  .form-input {
    @apply w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-custom;
  }

  .form-input:focus {
    @apply border-primary ring-2 ring-primary/20;
  }

  .form-input.error {
    @apply border-red-500 ring-2 ring-red-500/20;
  }

  .btn-primary {
    @apply w-full bg-primary text-white font-medium py-3 px-4 rounded-lg btn-hover shadow-md disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .radio-card {
    @apply flex items-center justify-center border-2 border-gray-200 rounded-lg cursor-pointer transition-all duration-300 hover:border-primary hover:bg-light/50;
  }

  .radio-card.selected {
    @apply border-primary bg-light text-primary;
  }

  /* 表单标签样式 */
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }

  /* 居中容器 */
  .form-container {
    @apply w-full max-w-sm mx-auto;
  }
  
  .error-message {
    @apply text-red-500 text-sm mt-1 animate-slide-up;
  }
  
  .success-message {
    @apply text-green-500 text-sm mt-1 animate-slide-up;
  }
}
